<template>
  <div>

    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar style="border-bottom: 1px solid #ccc" :mode="mode" :editor="editor" :defaultConfig="toolbarConfig" />
      <!-- 编辑器 -->
      <Editor style="height: 400px; overflow-y: hidden" :mode="mode" :defaultConfig="editorConfig" v-model="html" @onCreated="onCreated" @onChange="onChange" />
    </div>
    <div>
      <button @click="printEditorHtml">print html</button>
      <button @click="getEditorText">print text</button>
      <button @click="insertText">insert text</button>
    </div>

  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  name: "MyEditor",
  components: { Editor, Toolbar },
  props: ["template"],
  data() {
    return {
      editor: null,
      mode: "simple", // or 'simple'
      html: "",
      toolbarConfig: {
        /* 显示哪些菜单，如何排序、分组 */
        toolbarKeys: [
          "blockquote",
          "headerSelect",
          // 'header1',
          // 'header2',
          // 'header3',
          "|",
          "bold",
          "underline",
          "italic",
          "through",
          "color",
          "bgColor",
          "clearStyle",
          "|",
          "bulletedList",
          "numberedList",
          "todo",
          // 'justifyLeft',
          // 'justifyRight',
          // 'justifyCenter',
          {
            key: "group-justify", // 以 group 开头
            menuKeys: [
              "justifyLeft",
              "justifyRight",
              "justifyCenter",
              "justifyJustify",
            ],
          },
          {
            key: "group-indent", // 以 group 开头
            menuKeys: ["indent", "delIndent"],
          },
          "|",
          "insertLink",
          {
            key: "group-image", // 以 group 开头
            menuKeys: ["insertImage", "uploadImage"],
          },

          "insertVideo",
          "insertTable",
          "codeBlock",
          "|",
          "undo",
          "redo",
          "|",
          "fullScreen",
        ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        // autoFocus: false,

        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {},
      },
    };
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器

    this.$nextTick(() => {
      console.log("this.template: mounted", this.template);
      this.html = this.template;
      // this.editor.setHtml(this.html);
      // console.log("this.html: mounted", this.html);
    });

    setTimeout(() => {
      this.html = "<p>Ajax 异步设置内容 HTML<style>p{color: red;}</style></p>";
    }, 1500);
  },
  methods: {
    insertText() {
      const editor = this.editor; // 获取 editor 实例
      if (editor == null) return;

      // 调用 editor 属性和 API
      editor.insertText("一段文字");
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
      this.editor.setHtml(this.html);
    },
    onChange(editor) {
      this.$emit("update:template", editor.getHtml());
    },
    getEditorText() {
      const editor = this.editor;
      if (editor == null) return;
    },
    printEditorHtml() {
      const editor = this.editor;
      if (editor == null) return;
    },
  },

  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
p {
  color: red;
}
</style>
